<template>
  <el-container class="container">
    <el-main>
      <DevTest v-if="isDev"></DevTest>

      <h1>环境：{{ isDev ? '测试' : '生产' }} <el-button v-if="isDev" @click="warnRobotAction">告警测试</el-button></h1>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane v-for="item in tabList" :name="item.name" :label="item.label" :key="item.name"></el-tab-pane>
      </el-tabs>
      
      <component :is="curCom"></component>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {tabList, useApp} from './app'
import DevTest from './DevTest.vue'

const isDev = /^dev/.test(import.meta.env.MODE)

const {
  activeName,
  curCom,
  warnRobotAction
} = useApp()
</script>

<style>
.container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 30px;
}
</style>
